<template>
	<z-paging ref="paging" :auto-clean-list-when-reload="false" :auto-scroll-to-top-when-reload="false"
		v-model="dataList" @query="queryList" :default-page-size='pageSizeCount' :default-page-no='0'>
		<template>
			<view class="" style=" background-color: white; padding: 10px; 20px; z-index: 100;position: sticky;top :0;">


				<z-tabs active-color="#FFC125" :list="typeList" @change="change"></z-tabs>
			</view>
		</template>

		<view class="flex-row" style="flex-wrap: wrap; padding: 10px;">
			<view @click="clickItem(index)" v-for="(item,index) in dataList" :key="index">
				<ImageCell :dataModel="item" :column='2' ></ImageCell>
			</view>
		</view>

	</z-paging>
</template>

<script>
	import ZSSwiper from '../../components/zs-swiper/zs-swiper.vue'
	import ImageCell from '../../components/gif-image-cell/gif-image-cell.vue'

	export default {
		components: {
			ZSSwiper,
			ImageCell
		},
		data() {
			return {
				dataList: [],
				typeList:[],
				typeValue:'推荐',
				pageSizeCount:20,
				pageNo:0,
			}
		},
		onLoad() {
		  this.getTypeList();	
		},
		methods: {
			change(index) {
				this.typeValue = this.typeList[index];
				console.log('点击==',this.typeValue)
				 this.$refs.paging.reload()
			},
			getTypeList(){
				this.$uniCloudApi.get_type_list('2').then(res=>{
					var typeModel = res[0]
					this.typeList = typeModel.typeList;
				});
			},
			queryList(pageNo, pageSize) {
				this.pageNo = pageNo;
			  this.getData(pageNo);
			},
			getData(pageNo){
				this.$uniCloudApi.get_data_list(4,this.typeValue, pageNo, this.pageSizeCount).then((res) => {
					this.$refs.paging.complete(res);
				}).catch(err => {
					this.$refs.paging.complete([]);
					this.errStr = err.toString();
					uni.showToast({
						title: err.toString(),
						icon: 'none'
					})
				})
			},
			clickItem(index){
				var item = this.dataList[index]
				var type = this.typeValue
				var model = {
					'imageUrl':item.imageUrl,
					'tableType':4,
					'type':type,
					"pageSizeCount":this.pageSizeCount,
					'pageNo':this.pageNo
				}
				uni.navigateTo({
					url: '../details-page/details-page?model=' + this.$encodeJson(model)
				});
			}
		}
	}
</script>

<style lang="scss">
	.grid-text {
		font-size: 14px;
		color: #909399;
		padding: 10rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}
</style>